<template>
	
	<div class="edit-panel">
		
		<div class="edit-panel-header">
			<span>Actor</span>
		</div>
		<div class="edit-panel-body">
			<Transform ref="transformRef"></Transform>
			<Label ref="labelRef"></Label>
			<IconForImg ref="iconForImgRef"></IconForImg>
		</div>
	</div>
	

</template>

<script lang="ts" setup>
	// import {
	//   FolderAdd
	// } from '@element-plus/icons-vue'
	
	
	import { getActorById } from "@/api/scene";
	
	import Transform from "./transform/Transform.vue"
	import Label from "./label/Label.vue"
	import IconForImg from "./IconForImg/IconForImg.vue"
	
	
	import {ref } from 'vue'
	const transformRef= ref()
	const labelRef= ref()
	const iconForImgRef= ref()
	
	
	const GetActor=(id: string)=>{
		getActorById({
			"id":id,
		})
		.then((res) => {
			if(res.code==200){
				const actor=res.result;
				transformRef!.value.setTransform(actor.id,{
					position: actor.position!? eval('(' + actor.position + ')'):null,
					rotation:actor.rotation!? eval('(' + actor.rotation + ')'):null,
					scale:actor.scale!? eval('(' + actor.scale + ')'):null
				});
				if(actor.style){
					var style=eval('(' + actor.style + ')');
					if(style && style.label){
						labelRef!.value.setForlabel(actor.id,style.label);
					}
					if(style && style.marker){
						iconForImgRef.value.setForImg(actor.id,style.marker);
					}
				}
			}else{
				ElMessage.error(res.message || '系统出错');
			}
		})
		.catch((e) => {
		})
		.finally(() => {
		});
		
	}
	
	const setActor=(actor)=>{
		GetActor(actor.id);
	}

	onMounted(() => {
	});

	defineExpose({
	  setActor
	});

</script>

<style scoped>
/deep/ .el-table .warning-row {
  --el-table-tr-bg-color: #0000008a;
}
/deep/ .el-table .success-row {
  --el-table-tr-bg-color: #55ff008a;
}

/deep/.el-table {
    background-color: transparent; 
    font-size: 14px;
	border: none;
	--el-table-border-color: transparent;
	color: #ccc;
}

/deep/ .el-table tr {
    background-color: transparent;
	cursor: pointer;
}


/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: #606266;
}


/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-left: 2px solid transparent;
}


/deep/ .el-table td:hover{
	background-color: #174a7d!important;
	border-left: 2px solid #0080ff; 
}

/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
}
/deep/ .el-table--border .el-table__cell {
    border-right: none;
}

/* background-color: #174a7d!important;
    border-left: 2px solid #0080ff; */

.edit-panel{
		flex:1;
		background-color: #2b2c2f;
		height: 100%;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		>.edit-panel-header{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 100%;
			height: 34px;
			background-color: #36373a;
			border-bottom: 1px solid #18181b;
			border-top: 1px solid #515664;
			color: #ccc;
			font-size: 14px;
			>span{
				border-left-width: 3px!important;
				padding-left: 8px!important;
				height: 16px;
				line-height: 17px;
				font-size: 13px;
				color: #ccc;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				white-space: nowrap;
				border-left: 2px solid #0080ff;
				margin-left: 8px;
				padding-left: 3px;
			}
			>div{
				float: right;
				margin-top: -1px;
				>button{
				   width: 1.4375rem;
				   height: 1.875rem;
				   margin-right: 0.3125rem;
				   background: transparent;
				   color: #ccc;
				}
			}
		}
 		>.edit-panel-body{
			flex: 1;
			height: 100%;
		} 
	}

</style>
